<template>

  <div id="sqlQuery">
    <div id="queryEdit" ref="queryEdit">
<!--      查询sql操作栏目-->
      <n-row id="queryOperation">
        <n-col span="8">


        </n-col>
        <n-col span="12">


        </n-col>
        <n-col span="4">


        </n-col>
      </n-row>
      queryEdit

    </div>
    <div id="queryResult" ref="queryResult">

      queryResult
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import Split from "split.js";

const sqlQuery = ref()
const queryResult = ref();
const queryEdit = ref();
const options = {
  gutterSize: 2,    // 分隔条的尺寸
  direction: 'vertical',
  sizes:[75,25],
  minSize: [100, 100],

};
onMounted(()=>{
  Split([queryEdit.value, queryResult.value], options)
})
</script>
<style scoped>
#sqlQuery{
  /*width: 100%;*/
  /*height: 100%;*/

}
</style>